<template>
  <d2-container>
    <div class="price">
      <!-- <p style="margin-left:10px;">淘宝垫付单,天猫垫付单,平台返款服务费统一都是3元/单。</p>
        <p style="margin-left:10px;">如有其他买手属性的要求(性别、信誉等) , 以发布任务时页面显示的增值价格为准。
          ( 增值价格是指在下图价格表的基础上所增加的价格)淘
          淘宝、天猫任务价格表单位:元(佣金不包括平台返款费用)</p> -->
      <div style="display:flex;width: 100%;">
        <div style="width:50%;display:flex;flex-direction: column;">
          <div style="display: flex;margin:10px 0 20px;">
            <div style="display: flex;margin-left:10px;">
              <img style="width:20px;height:20px;" src="../../../assets/taobao.png" alt="">
              <img style="width:20px;height:20px;margin-left:10px;" src="../../../assets/tianmao.png" alt="">
            </div>
            <span style="margin-left:10px;">淘宝、天猫任务价格表 单位：元</span>
          </div>
          <!-- <img style="width:30%;margin-bottom:10px;margin-top:20px;margin-left:10px;" src="../../assets/cope.png" alt=""> -->
          <el-table :data="tableData" style="width: 90%" border :row-class-name="tableRowClassName" header-align="center">
            <el-table-column prop="name" label="价格阶梯" align="center"></el-table-column>
            <el-table-column prop="price" label="佣金" align="center"></el-table-column>
          </el-table>
        </div>
        <div style="width:50%;display:flex;flex-direction: column;">
          <div style="display: flex;margin:10px 0 20px;">
            <div style="display: flex;margin-left:10px;">
            </div>
            <span style="margin-left:10px;">拼多多任务价格表 单位：元
                 <b style="color:#FE4F3F;">（晒图加1元）</b>
            </span>
          </div>
          <el-table :data="tableData_pdd" style="width: 90%" border :row-class-name="tableRowClassName" header-align="center">
            <el-table-column prop="name" label="价格阶梯" align="center"></el-table-column>
            <el-table-column prop="price" label="浏览单+精刷" align="center"></el-table-column>
            <el-table-column align="center" label="晒图">
              <template slot-scope="scope">
                <span style="color:red;">{{scope.row.price}}+1</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {usergetpriceinfo} from '../../../api/api'

  export default {
    name: "Admin_price",
    data() {
      return {
        tableData: [],
        tableData_pdd:[]
      }
    },
    created() {
      this.getprice()
    },
    methods: {
      getprice() {
        usergetpriceinfo().then(res => {
          if (res.Status == 200) {
            let temp = res.Data.info
            let titlelist = ['0 - 20', '20.1 - 50', '50.1 - 100', '100.1 - 150', '150.1 - 200',
              '200.1 - 250', '250.1 - 300', '300.1 - 350', '350.1 - 400', '400.1-450', '450.1-500', '500.1-550', '550.1-600',
              '600.1-650', '700.1-750', '750.1-800', '800.1-850', '850.1-900', '900.1-950', '950.1-1000','1000以上']
            this.tableData = temp.map((item, idx) => {
              return {name: titlelist[idx], price: item}
            })
            let titlelist_pdd = ['0 - 20', '20.1 - 50', '50.1 - 100', '100.1 - 150', '150.1 - 200',
              '200.1 - 250', '250.1 - 300', '300.1 - 350', '350.1 - 400', '400.1-450', '450.1-500', '500.1-550', '550.1-600',
              '600.1-650', '700.1-750', '750.1-800', '800.1-850', '850.1-900', '900.1-950', '950.1-1000','1000以上']
            this.tableData_pdd = res.Data.dy_price.map((item, idx) => {
              return {name: titlelist_pdd[idx], price: item}
            })
          }
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 1) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
        return '';
      }
    }
  }
</script>

<style lang="scss">
  .price {
    width:100%;
    .el-table .warning-row {
      background: oldlace;
    }

    .el-table .success-row {
      background: #f0f9eb;
    }
  }
</style>

